<template>
	<c-pop-box>
		<view class="c-bargain-fail text-center bg-color-white border-radius20 padding-top37 padding-bottom93">
			<view class="flex-column mc-flex-vcenter" style="position: absolute;top: -100rpx;left: 0;right: 0;z-index: 99;">
				<image :src="avatar" mode="aspectFill" class="border-radius" style="width: 120rpx;height: 120rpx;border: 2px solid white;"></image>
				<image src="../../../../static/images/ui_kj_help_hd.png" mode="widthFix" style="width: 414rpx;height: 86rpx;position: absolute;bottom: -30rpx;margin: 0 auto;z-index: -1;"></image>
			</view>
			<view class="font-size28 margin-top50">{{nameStr}}</view>
			<view class="font-size28 margin-top10">
				<text>帮你砍了</text>
				<text class="color-red margin-left10 margin-right10">{{num}}</text>
				<text>点券</text>
			</view>
			<view class="rel" style="width: 460rpx;margin: 80rpx auto;">
				<view class="color-white border-radius10 text-center mc-f12" style="height: 55rpx;line-height: 42rpx;width: 76rpx;position: relative;z-index: 9;" :style="{'margin-left':((progress-6)||70)+'%'}">
					<image src="../../../../static/images/ui_kj_help_msg.png" style="width: 76rpx;height: 55rpx;position: absolute;top: 0;left: 0;z-index: -1;"></image>
					<text>{{(progress||70)}}%</text>
				</view>
				<view class="progress-bar-wrap mc-flex-auto margin-top20">
					<view class="border-radius" style="height: 100%;background-color: #ffcd1e;" :style="{width:(progress||70)+'%'}"></view>
				</view>
			</view>
			<view class="dis-flex">
				<button open-type="share" class="dis-flex height84 border-radius" style="width:420upx;background-color:#ff484a">
					<text class="font-size33 color-white line-height">喊好友砍一刀</text>
				</button>
			</view>
		</view>
	</c-pop-box>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import CPopBox from '@/components/global/c-pop/c-pop-box';
	export default {
		name: 'c-bargain-fail',
		props: {
			value: {
				type: Object,
				default: {}
			}
		},
		components: {
			CPopBox
		},
		data() {
			return {
				list: []
			};
		},
		watch: {},
		computed: {
			avatar: function() {
				return this.value.avatar
			},
			nameStr: function() {
				return this.value.nameStr
			},
			num: function() {
				return this.value.num
			},
			progress: function() {
				return this.value.progress
			},
		},
		methods: {
			...mapActions('pop', ['popShow']),
			...mapActions('common', ['tabCurrent2Up']),
			toMoreBargain() {
				this.popShow();
				this.tabCurrent2Up(1);
				uni.switchTab({
					url: '/pages/tabBar/draw/index'
				})
			},
			btnShare() {
				console.log('分享');
			}
		},
		created() {},
		mounted() {}
	};
</script>
<style lang="scss" scoped>
	.c-bargain-fail {
		position: relative;
		width: 632upx;
		min-height: 600rpx;
	}

	.progress-bar-wrap {
		background-color: #E1E1E1;
		border-radius: 1000px;
		height: 28rpx;
	}
</style>
